<!-- ListView.vue -->
<template>
    <div class="container">
        <el-table :data="currentPageData" style="width: 90%; margin: 0 auto; padding: 20px 0;">
            <el-table-column label="名称" align="center" prop="name" width="120" />
            <el-table-column label="数量" align="center" prop="num" width="120" />
            <el-table-column label="图片" align="center" prop="photos">
                <template #default="{ row }">
                    <div v-if="row.photos.length">
                        <div style="display: flex; flex-wrap: nowrap; overflow-x: auto;">
                            <div v-for="(photo, index) in row.photos" :key="index" style="margin-right: 5px;">
                                <img :src="photo" alt="photo" />
                            </div>
                        </div>
                    </div>
                    <span v-else>无照片</span>
                </template>
            </el-table-column>
            <el-table-column align="right">
                <template #header>
                    <el-input v-model="search" size="small" placeholder="请输入要搜索的名称" />
                </template>
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">查看更多</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <el-pagination layout="prev, pager, next" :total="filterTableData.length" :page-size="pageSize"
                :current-page="currentPage" @current-change="handlePageChange" />
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref, onMounted } from 'vue';
import { imgs_list, remove_list } from '../../api/request';
import api from '../../api/index';
import { ElMessage, ElMessageBox } from 'element-plus'

interface User {
    name: string;
    num: number;
    photos: string[];
}

const tableData = ref<User[]>([]);
const search = ref('');
const currentPage = ref<number>(1);
const pageSize = ref<number>(3); // 每页 3 行

// 计算属性用于过滤表格数据
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
    )
);

const currentPageData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value; // 计算开始索引
    const end = start + pageSize.value; // 计算结束索引
    return filterTableData.value.slice(start, end); // 返回当前页的数据
});

// 获取照片列表
const photoList = async () => {
    const content = await imgs_list();
    const { code, result } = content;
    if (code === 200) {
        tableData.value = result.map(item => {
            const photos = item.imgurl.split('\n').map(item => item.trim()).filter(Boolean).map(item => api.url + item);
            return {
                name: item.name,
                num: photos.length,
                photos: photos,
            };
        });
    }
};

const handlePageChange = (page: number) => {
    currentPage.value = page; // 更新当前页码
};

// 编辑和删除处理函数
const handleEdit = (index: number, row: User) => {
    console.log('编辑:', index, row);
    console.log(row.name)
};

const handleDelete = async (index: number, row: User) => {
    const name = row.name;
    console.log(name)
    try {
        await ElMessageBox.confirm(
            '您确定要删除此条吗?',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        const content = await remove_list({name:name});
        const { code, result } = content;
        console.log(content)
        if (code == 200) {
            // 从 tableData 中删除该项
            tableData.value = tableData.value.filter(item => item.name !== name);
            ElMessage({
                type: 'success',
                message: '删除成功',
            });
            console.log(result);
        } else {
            ElMessage({
                type: 'error',
                message: '删除失败',
            });
        }
    }
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    catch (error) {
        ElMessage({
            type: 'info',
            message: '删除取消',
        });
    }
};

onMounted(() => {
    photoList();
});
</script>
<style scoped lang="scss">
.container {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;

    /* border: 2px solid #ccc; */
    .page {
        display: flex;
        width: 100%;
        justify-content: center;
    }
}
</style>